<template>
  <div class="hello">
      <h1>{{msg}}</h1>
      <p>{{count}}</p>
      <button @click="add">增加</button>
      <button @click="reduce">减少</button>
      <div class="top">
         <input type="text" v-model="values" @keyup.enter="jianting(values)">
      </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '增加减少状态',
      values:''
    }
  },
  mounted(){
     console.log(this);
     console.log(this.$router.currentRoute.path);
  },
  methods:{
    jianting(value){
       this.change(value);
       this.values = '';
    },
    ...mapMutations(['add','reduce','change']),
  },
  computed:{
    ...mapState(['count']),
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
h1
  color #f00
.top
  padding-top 30px

</style>
